<template>
  <div>
    <!-- 标签页 -->
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="需要回复" name="pending">
        <!-- 订单表格 -->
        <el-table
          :data="replies"
          style="width: 100%"
          border
          stripe
          @row-click="handleRowClick"
        >
          <el-table-column
            prop="orderId"
            label="订单号"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="userName"
            label="用户名"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="rate"
            label="评分"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="content"
            label="评论"
            width="180"
          >
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button
                type="warning"
                size="mini"
                @click="handleTrack(row)"
                v-if="row.content === null || row.content !== '' "
              >回复评论</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next, sizes, total"
            :total="pendingTotal"
            :page-size="queryParams.pageSize"
            :current-page="queryParams.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="全部评论" name="completed">
        <!-- 订单表格 -->
        <el-table
          :data="coments"
          style="width: 100%"
          border
          stripe
          @row-click="handleRowClick"
        >
          <el-table-column
            prop="orderId"
            label="订单号"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="userName"
            label="客户姓名"
            width="180"
          ></el-table-column>
          <el-table-column
              prop="rate"
              label="评分"
              width="180"
          ></el-table-column>
          <el-table-column
              prop="content"
              label="评论"
              width="180"
          >
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next, sizes, total"
            :total="completedTotal"
            :page-size="queryParams.pageSize"
            :current-page="queryParams.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 订单详情模态框 -->
    <el-dialog
      title="订单详情"
      v-model="dialogVisible"
      width="60%"
    >
      <h4>商品详情:</h4>
      <el-table :data="orderDetail" style="width: 100%">
        <el-table-column prop="name" label="商品名称" width="180"></el-table-column>
        <el-table-column prop="count" label="数量" width="180"></el-table-column>
        <el-table-column prop="price" label="单价"></el-table-column>
        <el-table-column prop="totalPrice" label="总价"></el-table-column>
        <el-table-column prop="disCount" label="折扣"></el-table-column>
        <el-table-column prop="disTotalPrice" label="折后价"></el-table-column>
        <el-table-column prop="storeProductImg" label="商品图片">
          <template #default="scope">
            <img :src="scope.row.storeProductImg" alt="" style="width: 100px;height: 100px">
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment-timezone';
import axios from 'axios';
import { ElMessage } from "element-plus";

export default {
  name: 'Comment',
  data() {
    return {
      dialogVisible: false,
      activeTab: 'pending', // 当前选中的标签页
      // 查询条件
      orderDetail: [],
      queryParams:{
        pageNum: 1,
        pageSize: 5,
      },
      // 订单数据
      orders: [],
      total: 0,
      pendingTotal: 0,
      completedTotal: 0,
      coments:[],
      replies: []
    };
  },
  computed: {
    // 根据查询条件过滤订单
    // 需要回复的订单
    pendingOrders() {
      return this.coments.filter(order => order.replay !== null);
    },
    // 不需要回复的订单
    completedOrders() {
      return this.coments.filter(order => order.replay === null);
    },
    // // 分页后的需要回复的订单数据
    // paginatedPendingOrders() {
    //   const start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize;
    //   const end = start + this.queryParams.pageSize;
    //   return this.pendingOrders.slice(start, end);
    // },
    // // 分页后的不需要回复的订单数据
    // paginatedCompletedOrders() {
    //   const start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize;
    //   const end = start + this.queryParams.pageSize;
    //   return this.completedOrders.slice(start, end);
    // }
  },
  methods: {
    // 查询
    handleQuery() {
      this.queryParams.pageNum = 1; // 查询时重置到第一页
      this.getOrders();
    },
    // 重置查询条件
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 5,
      };
    },
    // 编辑订单
    handleEdit(row) {
      const productIds = JSON.parse(row.productIds);
      this.orderDetail = productIds;
      this.getStoreProducts(productIds);
      this.dialogVisible = true;
    },
    // 点击行
    handleRowClick(row, column, event) {
      console.log('点击行', row);
    },
    // 每页条数改变
    handleSizeChange(newSize) {
      this.queryParams.pageSize = newSize;
      this.queryParams.pageNum = 1; // 重置到第一页
      this.getOrders();
    },
    // 当前页改变
    handleCurrentChange(newPage) {
      this.queryParams.pageNum = newPage;
      this.getOrders();
    },
    getOrders() {
      axios
        .get("/meals/comment/getPageStoreComment", {
          params: this.queryParams
        })
        .then((response) => {
            this.coments = response.data.data.list;
            this.completedTotal = response.data.data.total;
        })
        .catch(() => {
          this.$message.error("获取订单列表失败！");
        });
    },
    getReplyOrders() {
      axios
          .get("/meals/comment/getReplyComment", {
            params: this.queryParams
          })
          .then((response) => {
            if (response.data.code === 200){
              this.replies = response.data.data.list;
              this.pendingTotal = response.data.data.total;
            }else {
              this.$message.error(response.data.msg);
            }
          })
          .catch(() => {
            this.$message.error("获取订单列表失败！");
          });
    },

    orderStateText(state) {
      const states = {
        0: "未支付",
        1: "已支付",
        2: "商家备餐中",
        3: "配送中",
        4: "已送达",
        5: "已取消",
        6: "已退款",
        7: "等待商家接单",
        8: "结束订单",
        9: "异常订单",
      };
      return states[state] || "未知状态";
    },
    formatDateTime(date) {
      return moment(date).tz('Asia/Shanghai').format('YYYY-MM-DD HH:mm:ss');
    },
    // 处理流程跟踪
    handleTrack(row) {

    },
    // 标签页点击事件
    handleTabClick(tab) {
      // this.activeTab = tab.name;
      console.log(tab.props.name);
      if (tab.props.name ==='completed'){
        this.getOrders();
      }else {
        this.getReplyOrders();
      }

    }
  },
  mounted() {
    this.getReplyOrders()
  }
};
</script>

<style scoped>
.demo-form-inline {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.el-button {
  margin-right: 5px;
}

.el-dialog {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
}

.el-table::before {
  height: 0;
}

.el-table th {
  background-color: #f5f7fa;
}

.el-table th.is-leaf {
  border-bottom: 1px solid #ebeef5;
}

.el-table__row:hover {
  background-color: #f5f7fa;
}

.el-table__row--striped {
  background-color: #fafafa;
}
</style>
